<template>
  <div ref="cav" :style="`width:${width};height:${height}`"></div>
</template>
<script>
export default {
  props: {
    version:Number,
    width: String,
    height: String,
    yNames: Array,
    xNames: Array,
    xDates: Array
  },
  data() {
    return {
      charts:{},
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [] //xNames,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: [] //YNames
        },
        series: []
      }
    };
  },
  watch:{
    version:function(){
      this.init();
    }
  },
  methods: {
    parseSitems(name, array) {
      return {
        name: name,
        type: "bar",
        stack: "总量",
        label: {
          normal: {
            show: true,
            position: "insideRight"
          }
        },
        data: array
      };
    },
    init() {
      this.option.legend.data = this.xNames;
      this.option.yAxis.data = this.yNames;
      let arraytemp = [];
      for (let i = 0; i < this.xNames.length; i++) {
        arraytemp.push(this.parseSitems(this.xNames[i], this.xDates[i]));
      }
      if (this.yNames[0] === "摘取式效率") {
        this.option.xAxis.axisLabel = {
          formatter: "{value} %"
        };
      }

      if (this.xNames[0] === "摘播式作业效率") {
        this.option.xAxis.axisLabel = {
          formatter: "{value} %"
        };
      }
      this.option.series = arraytemp;
      this.charts = this.$echarts.init(this.$refs.cav);
      this.charts.setOption(this.option);

    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style>
</style>